<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%--
  Created by IntelliJ IDEA.
  User: shilongliu
  Date: 2021/10/12
  Time: 10:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>Title</title>
        <script src="./js/wangEditor.min.js"></script>
        <script src="./js/jquery-3.6.0.min.js"></script>
    </head>
<style>
    #p1{
        font-size: 8px;
        color: #999999;
        margin: 5px 50px;
    }
    #div1{
        margin: 0px 50px 50px 50px;
    }
    #message{
        background-color: antiquewhite;
        margin: 50px 50px;

    }
    #msg{
        margin: 20px;
        padding: 20px;
        border: black solid 1px;
    }
    #msg img{
        margin: 10px 10px 0px 0px;
        width: 30%;
        height: auto;
    }
    #msg video{
        margin: 10px 10px 0px 0px;
        width: 30%;
        height: auto;
    }
    #msg blockquote{
        border-left: 8px solid #d0e5f2;
        padding: 5px 10px;
        margin: 10px 0;
        line-height: 1.4;
        font-size: 100%;
        background-color: #f1f1f1;
    }
    #msg table{
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
    }
    #msg table td,
    table th {
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
        padding: 3px 5px;
    }
    #msg table th {
        border-bottom: 2px solid #ccc;
        text-align: center;
    }
    #msg code {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        background-color: #f1f1f1;
        border-radius: 3px;
        padding: 3px 5px;
        margin: 0 3px;
    }
    #msg pre code {
        display: block;
    }
    #msg ul, ol {
        margin: 10px 0 10px 20px;
    }
    .reply{
        margin: 0px 0px 10px 20px;
    }


</style>
<body>

<div id="message">
    <c:forEach items="${list}" var="m">
        <div id="dd1">
            <div id="msg">${m.msg}</div>
            <a class="reply" href="deleteMessageById.msg?id=${m.id}">删除</a>
            <a class="reply" href="getOldMessage.msg?id=${m.id}">修改</a>
        </div>
        <div id="dd1">
            <c:forEach items="${rList}" var="r">
                <c:if test="${m.id==r.mid}">
                    <div>${r.replyMsg}</div>
                    <a class="reply" href="deleteReply.rpl?rid=${r.id}">删除</a>
                    <a class="reply" href="getOldReply.rpl?rid=${r.id}">修改</a>
                </c:if>
            </c:forEach>
            <form action="addReply.rpl?id=${m.id}" method="post" >
                <textarea class="reply" name="replyMsg"></textarea>

                <input class="reply" type="submit" value="回复"/>
            </form>
        </div>

    </c:forEach>
</div>

<textarea id="text1" style="width:100%; height:200px; display:none;"></textarea>
<p id="p1">上传大小限制:图片大小<10MB,视频大小<1000MB</p>
<div id="div1">

</div>
<input type="button" id="tijiao" value="提交"/>


<script type="text/javascript">
    const E = window.wangEditor;
    const editor = new E('#div1');
    var $text1 = $('#text1');
    editor.config.uploadImgServer = 'addImg.msg';
    editor.config.uploadVideoServer = 'addVideo.msg';
    editor.config.uploadImgHooks = {
        fail:function (xhr, editor, result) {
            alert("上传图片失败");
        }
    };
    editor.config.uploadVideoHooks = {
        fail:function (xhr, editor, result) {
            alert("上传视频失败");
        }
    }

    editor.config.customUploadImg = function(files, insert) {
        var formData = new FormData();
        for (var i = 0; i < files.length; i++) {
            formData.append("files[" + i + "]", files[i], files[i].name);
        }

        $.ajax({
            url: 'addImg.msg',    //这里是个servlet
            type: "POST",
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function (da) {
                console.log(da);
                if (da.errno == 0) {
                    for (var j = 0; j < da.data.length; j++) {
                        insert(da.data[j]);
                    }
                } else {
                    //alert(da.msg);
                    return;
                }
            }
        });
    }
    editor.config.uploadImgMaxSize = 10 * 1024 * 1024;
    editor.config.uploadImgMaxLength = 10;

    editor.config.customUploadVideo = function (files, insert){
        var formData = new FormData();
        for (var i = 0; i < files.length; i++) {
            formData.append("files[" + i + "]", files[i], files[i].name);
        }

        $.ajax({
            url: 'addVideo.msg',    //这里是个servlet
            type: "POST",
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function (da) {
                console.log(da);
                if (da.errno == 0) {
                    for (var j = 0; j < da.data.length; j++) {
                        insert(da.data[j]);
                    }
                } else {
                    //alert(da.msg);
                    return;
                }
            }
        });
    }

    editor.config.onchange = function (html) {
        // 监控变化，同步更新到 textarea
        $text1.val(html);
        if($('#text1').val()==""||$('#text1').val()==null){
            $("#tijiao").attr("disabled","disabled");
        }else{
            $("#tijiao").removeAttr("disabled");
        }
    }

    editor.create();
    $("#tijiao").attr("disabled","disabled");
    $text1.val(editor.txt.html());
    $("#tijiao").click(function(){
        var content= $('#text1').val();
        console.log(content);
        //alert(content);
        $.ajax({
            type:"post",
            url:"addMessage.msg",
            data:{
                "msg":content,
            },
            success: function(result){
                location.reload();
            },
        });
    })

</script>
</body>
</html>
